<%-- 
  -- Body para inscribir Student en Course
  --
  -- @author ariel.piechotka
--%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-html-el-1.2.8.tld" prefix="html-el"%>
<%@ taglib uri="/WEB-INF/struts-logic-el-1.2.8.tld" prefix="logic-el"%>
<%@ taglib uri="/WEB-INF/security.tld" prefix="security" %>
<%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax" %>

<%@ taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean2"%>

<script src="<html:rewrite page='/protected/script/util.js'/>" type="text/javascript"></script>

<%-- Para EXT --%>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/ext-1.1.1/resources/css/ext-all.css'/>" />

<script src="<html:rewrite page='/protected/script/ext-1.1.1/adapter/ext/ext-base.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ext-1.1.1/ext-all.js'/>" type="text/javascript"></script>

<!-- Para AjaxTags -->
<script src="<html:rewrite page='/protected/script/scriptaculous/scriptaculous.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_parser.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_controls.js'/>" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/ajaxtags/ajaxtags.css'/>" id="AjaxTagsCssId"/>

<%-- Funcionalidad de manejo de Ajax + JSON + Divs flotantes y esas cosas... --%>
<script src="<html:rewrite page='/protected/script/debt.js'/>" type="text/javascript"></script>

<div class="errors">
    <html:errors />
</div>

<script type="text/javascript">
    function enroll() {
        if (!Util.valid.isBlank($("studentId").value)) {
            // Se eligio pero puede haber sido modificado en ese caso se invalida.
            var oldStudentSurname = $("hiddenAutoCompleteSurnameId").value; 
            var actualStudentSurname = $("studentSurnameId").value; 
            
            if (oldStudentSurname != actualStudentSurname) {
                // Se modifico  => limpio todo y alerto
                $("hiddenAutoCompleteId").value = "";
                $("hiddenAutoCompleteSurnameId").value = "";
                $("studentSurnameId").value = "";
                Ext.MessageBox.alert('Error', 'Por favor, no modifique el campo de participante una vez que lo elige de la lista ... ');
                $("studentSurnameId").focus();
                return;
            }
        }

        if (!Util.valid.isBlank($("customerId").value)) {
            // Se eligio pero puede haber sido modificado en ese caso se invalida.
            var oldCustomerCorpName = $("hiddenAutoCompleteCustomerCorpNameId").value; 
            var actualCustomerCorporateName = $("corporateNameId").value; 
            
            if (oldCustomerCorpName != actualCustomerCorporateName) {
                // Se modifico  => limpio todo y alerto
                $("hiddenAutoCompleteCustomerId").value = "";
                $("hiddenAutoCompleteCustomerCorpNameId").value = "";
                $("corporateNameId").value = "";
                Ext.MessageBox.alert('Error', 'Por favor, no modifique el campo de cliente una vez que lo elige de la lista ... ');
                $("corporateNameId").focus();
                return;
            }
        }
        
        var idCourseValue = $("courseId").value;
        var idStudentValue = $("studentId").value;
        var idCustomerValue = $("customerId").value;

        if (Util.valid.isBlank(idStudentValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar el participante. ');
            $("studentId").focus();
            return;
        }
        if (Util.valid.isBlank(idCustomerValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar el cliente. ');
            $("customerId").focus();
            return;
        }
        
        var idCourseObj = $("modifyIdCourseId");
        var idStudentObj = $("modifyIdStudentId");
        var idCustomerObj = $("modifyIdCustomerId");
        
        idCourseObj.value = idCourseValue;
        idStudentObj.value = idStudentValue;
        idCustomerObj.value = idCustomerValue;
        
        var form = $("enrollStudentFormId");
        form.submit();
    }
    
	/* 
     * Procesa la respuesta del autocomplete
     * Se deja en hiddenAutoCompleteId (un hidden) el "id;razon social"
     * entonces se parsea y se saca el id y se deja en "customerId" y en 
     * "corporateNameId" se deja la "razon social"
     */
    var postAutoCompleteCorporateName = function() {
        var hiddenAutoCompleteValue = $("hiddenAutoCompleteCustomerId").value;
    
        if (!Util.valid.isBlank(hiddenAutoCompleteValue)) {
            // Algo se trajo entonces se parsea
            var splitted = hiddenAutoCompleteValue.split(';'); 
            
            var id = splitted[0];
            var corporateName = splitted[1];
            
            $("customerId").value = id;
            $("corporateNameId").value = corporateName;  
            $("hiddenAutoCompleteCustomerCorpNameId").value = corporateName;
            
            // Limpio lo que estaba antes....
            $("hiddenAutoCompleteId").value = "";
        }
    }
</script>

<%-- El ID del form NO debe ser modificado. Se usa desde el menu --%>
<html:form action="/protected/showEnrollStudent.do" styleId="courseFormId">

    <h2>Inscripci&oacute;n de participante en curso</h2>
    
    <div class="courseEdit">
        <table class="tableData" cellspacing="0">
            <tr>
                <td class="tableDataTitle">
                    Curso*
                </td>
                <td class="tableDataValue">
                    <html:select property="idCourse" styleClass="allSelects" styleId="courseId" >
                        <html:optionsCollection property="courseOptions"/>
                    </html:select>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Participante*
                </td>
                <td class="tableDataValue">
                    <html:text property="studentSurname" styleId="studentSurnameId" styleClass="form-autocomplete" size="30" title="Ingrese el apellido y espere a que se carguen los resultados..." />
                    <%--    En studentId esta el ID cuando se autocompleta luego del post-function. 
                            En hiddenAutoCompleteId esta lo q vino del autocomplete como auxiliar --%>
                    <html:hidden property="studentId" styleId="studentId" />
                    <input type="hidden" name="hiddenAutoComplete" id="hiddenAutoCompleteId" />
                    <input type="hidden" name="hiddenAutoCompleteSurname" id="hiddenAutoCompleteSurnameId" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Cliente*
                </td>
                <td class="tableDataValue">
                    <html:text property="corporateName" styleId="corporateNameId" styleClass="form-autocomplete" size="40" title="Ingrese la razon social del cliente y espere a que se carguen los resultados ..." />
                    <%--    En customerId esta el ID cuando se autocompleta luego del post-function. 
                            En hiddenAutoCompleteId esta lo q vino del autocomplete como auxiliar --%>
                    <html:hidden property="customerId" styleId="customerId"/>
                    <input type="hidden" name="hiddenAutoCompleteCustomer" id="hiddenAutoCompleteCustomerId" />
                    <input type="hidden" name="hiddenAutoCompleteCustomerCorpName" id="hiddenAutoCompleteCustomerCorpNameId" />
                </td>   
            </tr>
        </table>

        <br/>
        <div id="clear"></div>
    	<p class="mensajeCamposObligatorios">Los campos marcados con un asterisco (*) son obligatorios.</p>
    	<div id="clear"></div>

		<%-- Indicador de llamada de AJAX para el autocomplete --%>
		<span id="indicatorRegion" style="display: none; margin-left: 50%;">
		    <img id="pepepepep" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/ajax-loader.gif"/>" />
		</span>
		
        <div id="clear">
        </div>
        <div id="clear">
        </div>
        
        <%-- Solo los administradores pueden modificar un curso, pero verlo, pueden todos --%>
        <security:securizedContent roles="administrador,secretaria">
            <div class="panelButton">
                <input type="button" value="Inscribir" onclick="enroll();" title="Inscribe al participante en el curso..." class="button">
            </div>  
        </security:securizedContent>
    
    </div>

</html:form>

<ajax:autocomplete
  baseUrl="${pageContext.request.contextPath}/protected/autocompleteStudents.do"
  source="studentSurnameId"
  target="hiddenAutoCompleteId"
  parameters="studentSurname={studentSurnameId}"
  className="autocomplete"
  indicator="indicatorRegion"
  minimumCharacters="2"
  postFunction="postAutoComplete"
/>

<ajax:autocomplete
  baseUrl="${pageContext.request.contextPath}/protected/autocompleteCustomers.do"
  source="corporateNameId"
  target="hiddenAutoCompleteCustomerId"
  parameters="corporateName={corporateNameId}"
  className="autocomplete"
  indicator="indicatorRegion"
  minimumCharacters="2"
  postFunction="postAutoCompleteCorporateName"
/>

<%-- Inyectados por Javascript --%>
<div id="modifyDivId" class="hideClass">
    <html:form action="/protected/enrollStudent" styleId="enrollStudentFormId">
        <html:hidden property="idCourse" value="" styleId="modifyIdCourseId" />
        <html:hidden property="idStudent" value="" styleId="modifyIdStudentId" />
        <html:hidden property="idCustomer" value="" styleId="modifyIdCustomerId" />
    </html:form>
</div>
